import React from "react";
import { useNavigate } from "react-router-dom";
import { Swiper, Toast, Grid, Input } from "antd-mobile";
import { DownFill, SearchOutline, LocationOutline } from "antd-mobile-icons";
import "./index.scss";
import request from "../../request/index";
import Nav_1 from "../../assets/images/nav-1.png";
import Nav_2 from "../../assets/images/nav-2.png";
import Nav_3 from "../../assets/images/nav-3.png";
import Nav_4 from "../../assets/images/nav-4.png";

import ListCard from "../../components/ListCard/list-card";
import { getCurrenCity } from "../../utils/index";

const urlBase = "http://localhost:8080";

export default function Home() {
  const [city, setCity] = React.useState("上海");
  const [swiperList, setSwiperList] = React.useState([]);
  const [groupList, setGroupList] = React.useState([]);
  const [newList, setNewList] = React.useState([]);
  const navigate = useNavigate();

  const navList = [
    { title: "整租", icon: Nav_1 },
    { title: "合租", icon: Nav_2 },
    { title: "地图找房", icon: Nav_3 },
    { title: "去出租", icon: Nav_4 },
  ];

  React.useEffect(() => {
    swiperListFun();
    groupListFun();
    newListFun();
    // 获取当前地理位置
    getCurrenCity().then((res) => {
      // console.log("当前地理位置=》", res);
      setCity(res.label);
    });
  }, []);

  const items = swiperList.map((item, index) => (
    <Swiper.Item key={index}>
      <div
        className="swiper_item"
        onClick={() => {
          Toast.show(`你点击了卡片 ${index + 1}`);
        }}
      >
        <img src={urlBase + item.imgSrc} alt="" />
      </div>
    </Swiper.Item>
  ));

  // 获取轮播图数据
  const swiperListFun = () => {
    request.get("/home/swiper").then((res) => {
      // console.log("轮播图接口=》", res);
      if (res.status === 200) {
        setSwiperList(res.body);
      }
    });
  };

  // 获取租房小组数据
  const groupListFun = () => {
    request
      .get("/home/groups", { params: { area: "AREA|88cff55c-aaa4-e2e0" } })
      .then((res) => {
        if (res.status === 200) {
          setGroupList(res.body);
        }
      });
  };

  // 获取最新资讯数据
  const newListFun = () => {
    request
      .get("/home/news", { params: { area: "AREA|88cff55c-aaa4-e2e0" } })
      .then((res) => {
        if (res.status === 200) {
          setNewList(res.body);
        }
      });
  };

  const goto = (title) => {
    if (title === "整租" || title === "合租") navigate("/lookhouse");
  };

  return (
    <div>
      <div className="swiper">
        {/* 轮播图 */}
        <Swiper loop autoplay>
          {items}
        </Swiper>

        {/* 搜索栏 */}
        <div className="flex flex_a_c search-box">
          {/* 左侧 */}
          <div className="flex search">
            {/* 位置 */}
            <div
              className="flex flex_c location"
              onClick={() => navigate("/citylist")}
            >
              <span className="name">{city}</span>
              <DownFill className="icon-arrow" />
            </div>

            {/* 搜索表单 */}
            <div className="flex flex_c form">
              <SearchOutline fontSize={18} color="#9c9fa1" />

              <Input placeholder="请输入小区或地址" className="text" />
            </div>
          </div>

          {/* 右侧 */}
          <LocationOutline
            fontSize={25}
            color="#fff"
            onClick={() => navigate("/map")}
          />
        </div>
      </div>

      {/* 菜单栏 */}
      <div className="flex flex_r_b nav_list">
        {navList.map((item, index) => (
          <div
            className="flex flex_col"
            key={index}
            onClick={() => goto(item.title)}
          >
            <img className="icon" src={item.icon} alt="" />
            <span className="title">{item.title}</span>
          </div>
        ))}
      </div>

      {/* 租房小组 */}
      <div className="group">
        <div className="flex flex_r_b title">
          <span className="name">租房小组</span>
          <span className="more">更多</span>
        </div>

        <Grid columns={2}>
          {groupList.map((item) => (
            <Grid.Item key={item.id}>
              <div className="flex box-item">
                <div className=" flex flex_col title">
                  <span className="span_1">{item.title}</span>
                  <span className="span_2">{item.desc}</span>
                </div>
                <img src={urlBase + item.imgSrc} alt="" />
              </div>
            </Grid.Item>
          ))}
        </Grid>
      </div>

      {/* 最新资讯 */}
      <div>
        {newList.map((item, index) => (
          <ListCard key={item.id} newList={item} />
        ))}
      </div>
    </div>
  );
}
